<!-- 新增 -->
<template>
  <div>
    <el-card class="card">
      <div class="header">
        <div class="title">
          <div class="line" />
          <div>基础信息</div>
        </div>

        <div>
          <!-- 按钮 -->
          <el-button class="btn_l" @click="cancel">取消</el-button>
          <el-button type="primary" class="btn_r" @click="submit">保存</el-button>
          <!-- 按钮 -->
        </div>
      </div>
      <!-- 表单 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <!-- 基础信息 -->
        <div class="from" style="display: flex">
          <div class="from_content">
            <div class="text">
              <el-form-item label="机构名称：" prop="name" />
            </div>
            <div>
              <el-input v-model="ruleForm.name" placeholder="请输入" class="inp" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="选择省份：" prop="province" />
            </div>
            <div class="inp">
              <el-cascader
                v-model="value"
                style="width: 400px"
                :options="options"
                :props="props"
                @change="handlechange"
              />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="地址：" prop="address" />
            </div>
            <div class="inp">
              <el-input v-model="ruleForm.address" placeholder="请输入" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="对外服务电话：" prop="mobile" />
            </div>
            <div class="inp">
              <el-input v-model="ruleForm.mobile" placeholder="请输入" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="管理员姓名：" prop="adminUserName" />
            </div>
            <div class="inp">
              <el-input v-model="ruleForm.adminUserName" placeholder="请输入" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="联系方式：" prop="adminMobile" />
            </div>
            <div class="inp">
              <el-input v-model="ruleForm.adminMobile" placeholder="请输入" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="账号：" prop="adminId" />
            </div>
            <div class="inp">
              <el-input v-model="ruleForm.adminId" placeholder="请输入" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="密码：" prop="adminPwd" />
            </div>
            <div class="inp">
              <el-input v-model="ruleForm.adminPwd" placeholder="请输入" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <el-form-item label="开业时间：" prop="addTime" />
            </div>
            <div class="inp">
              <el-date-picker v-model="ruleForm.addTime" type="datetime" placeholder="请选择" />
            </div>
          </div>
        </div>

        <!-- 基础信息 -->

        <!-- 经营信息 -->

        <div class="header">
          <div class="title">
            <div class="line" />
            <div>经营信息</div>
          </div>
        </div>
        <div class="form_b">
          <div class="from_content">
            <div class="text">
              <text>法人代表：</text>
            </div>
            <div class="inp">
              <input type="text" placeholder="请输入法人代表" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <text>法人代表联系号码：</text>
            </div>
            <div class="inp">
              <input type="text" placeholder="请输入法人代表联系号码" />
            </div>
          </div>
          <div class="from_content">
            <div class="text">
              <text>统一社会信用代码：</text>
            </div>
            <div class="inp">
              <input type="text" placeholder="请输入统一社会信用代码" />
            </div>
          </div>
        </div>
        <div class="from_contents">
          <div class="from_content_b">
            <el-form-item label="卫生许可证：:" prop="license">
              <el-radio-group v-model="ruleForm.license">
                <el-radio :value="1">是</el-radio>
                <el-radio :value="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="from_content_b">
            <span>是否具备医疗定点资格：</span>
            <input type="radio" />
            是
            <input type="radio" class="radio" />
            否
          </div>

          <div class="from_content_b">
            <span>房屋性质：</span>
            <input type="radio" />
            自有产权
            <input type="radio" class="radio" />
            租贷
            <input type="radio" class="radio" />
            合作应用
            <input type="radio" class="radio" />
            其他
          </div>
        </div>
        <div class="from_contents">
          <div class="from_content_b">
            <div>营业执照:</div>
            <el-upload
              class="avatar-uploader"
              action="http://123.57.237.81:8080/caresystem/api/upload/add"
              :method="'post'"
              :show-file-list="false"
              :on-success="onSuccess"
            >
              <img
                v-if="ruleForm.certificate"
                :src="FILE_BASE_URL + ruleForm.certificate"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>

          <div class="from_content_b">
            <div>机构图片:</div>
            <el-upload
              v-model="fileList"
              class="upload-demo"
              action="http://123.57.237.81:8080/caresystem/api/upload/add"
              list-type="picture"
              :limit="3"
              :on-success="onSuccessList"
            >
              <el-button type="primary">上传图片</el-button>
              <template #tip>
                <div class="el-upload__tip">可以上传三张图片</div>
              </template>
            </el-upload>
          </div>
        </div>
        <!-- 经营信息 -->
      </el-form>
      <!-- 表单 -->
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { AddListData } from "@/api/company/type";
import { CompanyAdd, CompanyUpdate, CompanyGet, companyGetcityAPI } from "@/api/company/Company";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const options = ref<any[]>([]);
const formSize = ref<ComponentSize>("default");
const value = ref([]);

const FILE_BASE_URL = "http://123.57.237.81:8080/caresystem/";

// 省
const props = ref({
  value: "n",
  label: "n",
  children: "c",
});
const City = () => {
  companyGetcityAPI().then((res: any) => {
    options.value = res;
    console.log(options.value);
  });
};

const handlechange = (value: any) => {
  ruleForm.city = value[1];
  ruleForm.province = value[0];
};
// 获取表单单条数据
let ruleForm = reactive<AddListData>({
  id: 0,
  name: "",
  province: "",
  city: "",
  address: "",
  telephone: "",
  startTime: "",
  adminId: "",
  legalPerson: "",
  mobile: "",
  creditCode: "",
  license: 0,
  medicalPoint: 0,
  house: 0,
  certificate: "",
  picture: "",
  adminPwd: "",
  adminUserName: "",
  adminName: "",
  adminMobile: "",
  addTime: "",
});
const CompanyId = ref();
const getCompany = async () => {
  let res = await CompanyGet(CompanyId?.value);
  Object.assign(ruleForm, res);
  // console.log(12331, ruleForm);
  // ruleForm.roleIds = res.roles.map((item: any) => item.id);
};
// 图片上传
const imageUrl = ref("");

const fileList = ref<any[]>([]);
// 头像上传成功回调函数
const onSuccess = (event: AnyObject) => {
  ruleForm.certificate = event.data.url;
};

const onSuccessList = (event: AnyObject) => {
  fileList.value.push({
    url: FILE_BASE_URL + event.data.url,
  });
};

// 添加
const submitForm = async () => {
  const companySubmit = {
    ...ruleForm,
    mobile: Number(ruleForm.mobile),
    license: String(ruleForm.license),
  };
  let res = await CompanyAdd(companySubmit);
  ElMessage.success("添加成功");
  router.push("/company/list");
};
const submit = async () => {
  ruleForm.picture = fileList.value.map((item) => item.url).join(",");
  console.log(ruleForm);

  ruleFormRef.value?.validate(async (valid) => {
    if (valid) {
      ruleForm.id === 0 ? await submitForm() : await upload();
    }
  });
};

// 修改
const upload = async () => {
  let res = await CompanyUpdate(ruleForm);
  ElMessage.success("修改成功");
  router.push("/company/list");
};
// 取消
const cancel = () => {
  router.push("/company/list");
};
// 表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<AddListData>>({
  name: [{ required: true, message: "请输入机构名", trigger: "blur" }],
  province: [{ required: true, message: "请选择省份", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  mobile: [
    { required: true, message: "请输入对外服务电话", trigger: "blur" },
    { pattern: /^[0-9]{11}$/, message: "手机号码格式不正确", trigger: "blur" },
  ],
  adminUserName: [{ required: true, message: "请输入管理员电话", trigger: "blur" }],
  adminMobile: [
    { required: true, message: "请输入联系方式", trigger: "blur" },
    { pattern: /^[0-9]{11}$/, message: "手机号码格式不正确", trigger: "blur" },
  ],
  adminId: [{ required: true, message: "请输入账号", trigger: "blur" }],
  adminPwd: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
  // addTime: [{ required: true, message: "请选择开业时间", trigger: "blur" }],
});

onMounted(() => {
  // getList();
  // getDepartList();
  CompanyId.value = route.query.id;
  City();
  getCompany();
});
</script>
<style scoped lang="less">
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;

  .header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    margin: 30px 30px 0 30px;

    .title {
      display: flex;
      align-items: center;
    }

    .line {
      display: block;
      width: 6px;
      height: 20px;
      background-color: #529bfd;
      margin-right: 8px;
    }
  }

  // 基础信息
  .from {
    // width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .from_content {
      margin-top: 30px;
      .text {
        font-size: 14px;
        color: gray;
        width: 200px;
        // margin-left: 30px;
        // background-color: pink;
      }
      .inp {
        width: 500px;
        margin-left: 30px;
        // margin-top: 10px;
      }
    }
  }
  .form_b {
    display: flex;
    flex-wrap: wrap;
    .from_content {
      margin: 30px;
      flex-wrap: wrap;
      .text {
        font-size: 14px;
        color: gray;
      }
      .inp {
        width: 500px;
        margin-top: 10px;
        input {
          width: 500px;
          height: 30px;
          border: 1px solid #aaa;
          border-radius: 3px;
          outline: none;
        }
      }
    }
  }
  .from_contents {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    .from_content_b {
      width: 40%;
      margin: 30px;
      font-size: 14px;
      color: gray;
      .radio {
        margin-left: 40px;
      }
    }
    .avatar {
      width: 160px;
      height: 160px;
    }
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 160px;
  height: 160px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
